<template>
  <div>
    <router-view></router-view>

    <!--  tag 是将router-link 标签换成别的标签  如将router-link 渲染成button标签 -->
    <!--v-model="active"  :  v-model作用于组件上  -->
    <!-- router 表示下面都可以跳路由 -->
    <van-tabbar v-model="active" router>
      <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
      <van-tabbar-item icon="search" to="/fenl">分类</van-tabbar-item>
      <van-tabbar-item icon="friends-o" to="my">我的</van-tabbar-item>
      <van-tabbar-item icon="setting-o" to="gouwche">购物车</van-tabbar-item>=
    </van-tabbar>
  </div>
</template>

<script>
import Vue from "vue";
import { Tabbar, TabbarItem } from "vant";

Vue.use(Tabbar);
Vue.use(TabbarItem);

export default {
  data() {
    return {
      active: 0,
    };
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="scss" scoped>
</style>